<template>
  <div>
    <div>
      <Nav></Nav>
      <v-title>游戏资讯</v-title>
    </div>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>游戏资讯</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="12">
        <el-select v-model="searchValue" placeholder="请选择">
          <el-option
            v-for="item in searchType"
            :key="item.searchValue"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp;&nbsp;<el-date-picker
          v-model="searchDate"
          type="month"
          placeholder="选择年-月"
          v-if="searchValue == 1"
        />
        <el-input
          v-model="name"
          placeholder="请输入关键字"
          v-if="searchValue == 2"
        />
        &nbsp;&nbsp;&nbsp;
        <button
          type="button"
          class="el-button el-button--primary is-round"
          @click="getGameList"
        >
          <span>查询</span>
        </button>
      </el-col>
    </el-row>
    <br /><br />
    <el-row class="game-list">
      <div v-if="Object.keys(gameNewsTimeList).length > 0">
        <div v-for="(gameNewsList, key) in gameNewsTimeList" v-bind:key="key">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>Ꮚ･ꈊ･Ꮚ →→→ {{ key }}</b>
            </div>
            <div class="text item">
              <div
                v-for="(gameNews, index) in gameNewsList"
                v-bind:key="gameNews.id"
              >
                <el-row>
                  <el-col :span="6"
                    ><img :src="gameNews.imgUrl" width="250" height="192"
                  /></el-col>
                  <el-col :span="14" :offset="4">
                    <router-link :to="`/gameNewsDetail/${gameNews.id}`">{{ gameNews.chiName }}</router-link>
                    <br />
                    <span class="old-name">{{ gameNews.otherName }}</span
                    ><br />
                    <p>游戏平台</p>
                    <span
                      v-for="(item, index) in gameNews.platform.split(',')">
                      <el-tag effect="dark" type="info">{{ item }}</el-tag>
                      <span
                        v-if="index + 1 < gameNews.platform.split(',').length"
                        >&nbsp;</span
                      >
                    </span>
                    <br />
                    <p>游戏基因</p>
                    <span
                      v-for="(item, index) in gameNews.gameGene.split(',')">
                      <el-tag effect="dark" type="">{{ item }}</el-tag>
                      <span
                        v-if="index + 1 < gameNews.gameGene.split(',').length"
                        >&nbsp;</span
                      >
                    </span>
                    <br />
                    <p>发售时间</p>
                    {{ gameNews.saleTime }}<br />
                  </el-col>
                </el-row>

                <el-divider v-if="index + 1 < gameNewsList.length"
                  >下面还有游戏噢~</el-divider
                >
              </div>
            </div>
          </el-card>
          <br /><br />
        </div>
        <el-backtop/>
        <el-divider>亲~已经看到底了吖~</el-divider>
      </div>
      <div v-if="Object.keys(gameNewsTimeList).length == 0">
        <el-result title="暂时没有相关游戏资讯" subTitle="抱歉~暂时没有相关游戏资讯噢~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
        </el-result>
      </div>
    </el-row>
    <br />
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getGameNewsList } from "@/api/index";
export default {
  name: "",
  created() {
    this.getGameList();
  },
  components: {
    Nav,
    VTitle,
  },
  data() {
    return {
      year: "",
      month: "",
      name: "",
      gameNewsTimeList: [],
      searchType: [
        {
          value: 1,
          label: "时间",
        },
        {
          value: 2,
          label: "关键字",
        },
      ],
      searchValue: 1,
      searchDate: "",
    };
  },
  methods: {
    async getGameList() {
      let that = this;
      that.gameNewsTimeList = [];
      let name = that.name;
      if (that.searchDate != "") {
        that.name = "";
        that.year = that.searchDate.getFullYear();
        that.month = that.searchDate.getMonth() + 1;
      }
      if (name != "") {
        that.year = "";
        that.month = "";
      }
      let year = that.year;
      let month = that.month;
      
      await getGameNewsList(year, month, name).then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.gameNewsTimeList = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}
.el-input {
  width: 25%;
}
.game-list {
  width: 50%;
  margin-left: 25%;
}
a {
  font-size: 25px;
  color: #2abaca;
  font-weight: bolder;
}
.old-name {
  color: #000;
}
p {
  font-size: 12px;
  line-height: 20px;
  display: block;
  color: #9497a0;
}
</style>